<template>
  <h4>生命周期</h4>
  <div>count: {{ count }}</div>
</template>

<script>
import { onMounted, ref, onBeforeUnmount } from "vue";

export default {
  setup() {
    // 生命周期现在都要从vue里面解构，前面都要加上on
    // 生命周期调用的过程中，里面传入一个回调函数
    // 删除了创建阶段的生命周期，如果要用，可以直接在setup里面写
    // 生命周期可以重复调用
    // onMounted(() => {
    //   console.log(123);
    // });
    // console.log("created");

    const count = ref(1);

    let timer;
    // timer没有用ref，因为不需要用到响应式
    // 没有去return，因为不需要用在html里面
    onMounted(() => {
      timer = setInterval(() => {
        count.value++;
      }, 1000);
    });
    onBeforeUnmount(() => {
      clearInterval(timer);
    });

    return {
      count,
    };
  },
};
</script>
